<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <van-sticky>
      <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="cardbox">
      <van-swipe-cell v-for="(item, index) in mains">
        <van-card
          :key="index"
          :price="item.lowPrice * item.firstCate[0]"
          :desc="item.areaName"
          :title="item.title"
          :thumb="item.imgUrl"
        >
          <template #tags> </template>
          <template #footer>
            <van-field name="stepper" :key="index">
              <template #input>
                <van-stepper
                  min="0"
                  default-value="0"
                  v-model="item.firstCate[0]"
                />
              </template>
            </van-field>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="removelist(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-sticky :offset-bottom="0" position="bottom">
      <van-submit-bar button-text="提交订单" @submit="onSubmit" />
    </van-sticky>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapMutations, mapState } from 'vuex'
import 'vant/es/toast/style'
import axios from 'axios'

export default defineComponent({
  components: {},
  data() {
    return {
      mains: [],
      step: 0,
      num: 0
    }
  },
  computed: {
    totalprice() {
      let total = 0
      this.books.forEach((element) => {
        if (element.check == true) {
          total += element.price * element.num
        }
      })
      return total
    },
    ...mapState(['numSum'])
  },
  methods: {
    // changenum(value) {
    //   let nums = value
    //   return nums
    // },
    ...mapMutations(['changeprice']),
    removelist(item) {
      let indexlist = this.mains.indexOf(item)
      if (indexlist !== -1) {
        this.mains.splice(indexlist, 1)
      }
    },
    onClickLeft() {
      return this.$router.push({ name: 'foodlist' })
    },
    comprice() {
      console.log(1)
    },
    onSubmit() {
      // this.$store.commit('changeprice')
      this.$router.push({ name: 'golist' })
    }
  },
  created() {
    axios({
      url: 'http://localhost:5000/foodlist',
      method: 'get'
    }).then((res) => {
      this.mains = res.data
    })
  },
  watch: {
    nums(newval, oldval) {
      console.log(newval, oldval)
    }
  }
})
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>
